 <!-- RIBBON -->
<div id="ribbon">

    <!-- breadcrumb -->
    <ol class="breadcrumb">
        <li>Prensa</li><li>Portada</li>
    </ol>
    <!-- /breadcrumb -->

</div>
<!-- /RIBBON -->

 <!-- PUBLICACION -->
<div id="content">

    <!-- row -->
    <div class="row">

        <!-- col -->
        <div class="col-xs-12 col-sm-7 col-md-7 col-lg-4">
            <h1 class="page-title txt-color-blueDark">

                <!-- PAGE HEADER -->
                <i class="fa-fw fa fa-microphone"></i> 
                Prensa 
                <span>>  
                    Portada
                </span>
            </h1>
        </div>
        <!-- /col -->

    </div>
    <!-- /row -->

    <!-- widget grid -->
    <section id="widget-grid" class="">

        <!-- row -->
        <div class="row">

            <!-- WIDGET 1 -->
            <article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

                <!-- Widget ID (each widget will need unique ID)-->
                <div 
                    class="jarviswidget jarviswidget-color-darken" 
                    id="" 
                    data-widget-colorbutton="false" 
                    data-widget-editbutton="false" 
                    data-widget-togglebutton="false" 
                    data-widget-deletebutton="false" 
                    data-widget-sortable="false"
                >
                    <header>
                        <span class="widget-icon"> <i class="fa fa-${icon}"></i> </span>
                        <h2>${title}</h2>				

                    </header>

                    <!-- widget div-->
                    <div>

                        <!-- widget edit box -->
                        <div class="jarviswidget-editbox">
                            <!-- This area used as dropdown edit box -->

                        </div>
                        <!-- end widget edit box -->

                        <!-- widget content -->
                        <div class="widget-body">
                            <p><i class="fa fa-warning text-warning"></i> <i>Haga click en la zona gris o la imagen para agregar o modificar un banner (jpg, png, gif)</i></p>
                            <div class="contenedor">
                                <form action="php/controllers/categoria.controller.php" method="post" class="categoria-value smart-form">
                                    <input class="input-lg" placeholder="Nombre de la categoría" type="text" name="value" value="${value}" ${readonly} />
                                    <input type="hidden" name="id" value="${id}" />
                                    <input type="hidden" name="redirect" value="1" />
                                    <input type="hidden" name="imgprefix" value="${imgprefix}" />
                                </form>
                            

                                <div style="float: none" class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                    <div class="page-title">
                                        <form id="imagesUploader" action="php/uploaders/categoriaBanner.uploader.php" method="post" enctype="multipart/form-data">
                                            <label class="uploader" for="fileInput">
                                                <img src="${banner}">
                                            </label>
                                            <input class="hidden" id="fileInput" onchange="forceUpload();"  type="file" name="files[]">
                                            <input class="hidden" id="mySubmit" type="submit" value="Upload File to Server">
                                            <input type="hidden" name="imgprefix" value="${imgprefix}" />
                                        </form>
                                    </div>
                                </div>
                                        <p id="ajaxFormLoader" style="position: absolute; z-index: 2; bottom: 10px; left: 35px; display: none"><i class="fa fa-spin fa-circle-o-notch"></i> Cargando...</p>
                            </div>                            
                            
                            <div class="widget-footer smart-form">
                                <div class="btn-group">
                                    <button class="btn btn-sm btn-success saveForm" type="button">
                                        Guardar
                                    </button>	
                                </div>
                            </div>

                        </div>
                        <!-- end widget content -->

                    </div>
                    <!-- /widget div -->

                </div>
                <!-- /widget -->

            </article>
            <!-- /WIDGET 1 -->

        </div>

        <!-- /row -->

    </section>
    <!-- /widget grid -->

</div>
<!-- /PUBLICACION -->